<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <form action="/checkusername" method="get" class="nsername"> -->
  <!-- 校验用户名是否正确 -->
  姓名：<input type="text" name="username" class="username">
  <span class="info">提示信息</span> <br>
  密码：<input type="text" name="pwd"> <br>
  <input type="submit" class="sub" value="提交">
  <!-- </form> -->
  <script>
    // ajax : a: async j : javascript  a : and x : xml
    // 异步的JavaScript（json） 和  xml
    // ajax ，是做前后端数据交互的.
    // json 和 xml 是主流的数据传输格式。
    // ajax 数据交互： 客户端主动请求数据 ， 不会刷新页面
    // form表单提交数据 、通过地址栏querystring传递数据。 ： 必须基于跳转刷新
    // 后端的数据可以通过ejs 渲染出来 ： 服务端推送数据（ssr： server send render

    // 发送get形式的ajax；
    // 当点击提交的时候发送ajax 然后把用户名携带到后端进行校验用户名是否正确
    let subEle = document.querySelector(".sub");
    let usernameEle = document.querySelector(".username");
    usernameEle.onblur = function () {
      // 1.创建一个ajax对象，预定义的类
      let xhr = new XMLHttpRequest();
      let username = usernameEle.value;
      // 2.配置ajax对象，有三个参数
      // 参数一：发送ajax的方式  get/post
      // 参数二：发送ajax的请求地址；
      // 参数三：参数是否是异步ajax。默认是true，就是异步ajax。
      xhr.open("get", "/checkusername?username=" + username);
      // 3.发送ajax到后端
      xhr.send()
      // 4.接收服务端返回的内容
      xhr.onload = function () { //是异步
        // 接收后端输出的内容
        // 后端的所有打印内容都会通过xhr.responseText显示出来
        console.log(xhr.responseText);
        let res = JSON.parse(xhr.responseText);
        console.log(res);
        document.querySelector(".info").innerHTML = res.info;
      }
    }
  </script>
</body>

</html>